/*
 * 设备管理edit组件
 * @Author: zfx
 * @Date: 2018-06-19 17:53:27
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .ivu-form-item-content {
        img {
            width: 150px;
		}

	}


</style>
<template>
	<div class="v-customer-banner-edit">
		<Form
			ref="formValidate"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="labelWidth(120,170)"
			name="create-form">

			<!-- 语言 -->
			<Tabs
				v-model="language_id"

			>
				<TabPane
					v-for="(locale_suggest, locale_idx) in language_index"
					:key="`hm_tab_lang[${locale_idx}]`"
					:label="locale_suggest.name"

				>


					<!-- 设备名称 -->
					<Form-item
						v-show="locale_idx==1?false:true"
						:label="$t('equipment.device_name')"
						prop="device_zh_name">
						<i-input
							v-model="formValidate.device_zh_name"
							:placeholder="$t('equipment.please_enter_device_name')"
							name="`reate-device_zh_name${locale_idx}`"
							type="text"
							@on-keydown="change_en_language"/>
					</Form-item>

					<Form-item
						v-show="locale_idx==1?true:false"
						:label="$t('equipment.device_name')"
						prop="device_en_name"
					>
						<i-input
							v-model="formValidate.device_en_name"
							:placeholder="$t('equipment.please_enter_device_name')"
							name="`reate-device_zh_name${locale_idx}`"
							type="text"
							@on-keydown="change_zh_language"/>
					</Form-item>

					<!-- 使用说明中文图片-->
					<Form-item
						v-show="locale_idx==1?false:true"
						:label="$t('equipment.instruction_img')"
						prop="instruction_zh_img"
					>
						<Uploader
							ref="instruction_zh_img"
							:default.sync="instruction_zh_img_src"
							@on-remove="(file)=>{handleRemove('instruction_zh_img',file)}"
							@on-change="(file)=>{handleChange('instruction_zh_img',file)}">
							{{ $t('common.pic_tip') }}
						</Uploader>
					</Form-item>

					<!-- 使用帮助中文图片-->
					<Form-item
						v-show="locale_idx==1?false:true"
						:label="$t('equipment.using_help_img')"
						prop="use_help_zh_img"
					>
						<Uploader
							ref="use_help_zh_img"
							:default.sync="use_help_zh_img_src"
							@on-remove="(file)=>{handleRemove('use_help_zh_img',file)}"
							@on-change="(file)=>{handleChange('use_help_zh_img',file)}">
							{{ $t('common.pic_tip') }}
						</Uploader>
					</Form-item>

					<!-- 使用说明英文图片-->
					<Form-item
						v-show="locale_idx==1?true:false"
						:label="$t('equipment.instruction_img')"
						prop="instruction_en_img"
					>
						<Uploader
							ref="instruction_en_img"
							:default.sync="instruction_en_img_src"
							@on-remove="(file)=>{handleRemove('instruction_en_img',file)}"
							@on-change="(file)=>{handleChange('instruction_en_img',file)}">
							{{ $t('common.pic_tip') }}
						</Uploader>
					</Form-item>

					<!-- 使用帮助英文图片-->
					<Form-item
						v-show="locale_idx==1?true:false"
						:label="$t('equipment.using_help_img')"
						prop="use_help_en_img"
					>
						<Uploader
							ref="use_help_en_img"
							:default.sync="use_help_en_img_src"
							@on-remove="(file)=>{handleRemove('use_help_en_img',file)}"
							@on-change="(file)=>{handleChange('use_help_en_img',file)}">
							{{ $t('common.pic_tip') }}
						</Uploader>
					</Form-item>

				</TabPane>
			</tabs>

			<!-- 价格 -->
			<Form-item
				:label="$t('equipment.sku')"
				prop="sku">
				<InputNumber
					:min="100"
					:step="100"
					v-model="formValidate.sku"
					:placeholder="$t('equipment.please_select_sku')"
					name="create-sku"/>
			</Form-item>

			<!-- 排序 -->
			<Form-item
				:label="$t('equipment.sort')"
				prop="sort_order">
				<InputNumber
					:min="1"

					v-model="formValidate.sort_order"
					:placeholder="$t('equipment.please_select_sort')"
					name="create-sort"/>
			</Form-item>

			<!-- 备注 -->
			<Form-item
				:label="$t('equipment.remark')"
			>
				<i-input
					v-model="formValidate.remark"
					:placeholder="$t('equipment.please_enter_remark')"
					name="create-remark"
					type="text"/>
			</Form-item>

			<!-- 藍牙 -->
			<Form-item
				:label="$t('equipment.specification')"
				prop="specification">
				<i-input
					v-model="formValidate.specification"
					:placeholder="$t('equipment.please_enter_spec')"
					name="create-specification"
					type="text"/>
			</Form-item>


			<!-- service_uuid -->
			<Form-item
				label="service uuid"
				prop="service_uuid">
				<i-input
					v-model="formValidate.service_uuid"
					:placeholder="$t('equipment.please_enter_service_uuid')"
					name="create-service"
					type="text"/>
			</Form-item>

			<!-- read_uuid -->
			<Form-item
				label="read uuid"
				prop="read_uuid">
				<i-input
					v-model="formValidate.read_uuid"
					:placeholder="$t('equipment.please_enter_read_uuid')"
					name="create-read"
					type="text"/>
			</Form-item>


			<!-- write_uuid -->
			<Form-item
				label="write uuid"
				prop="write_uuid">
				<i-input
					v-model="formValidate.write_uuid"
					:placeholder="$t('equipment.please_enter_write_uuid')"
					name="create-write"
					type="text"/>
			</Form-item>

			<!-- 生产商 -->
			<Form-item
				:label="$t('equipment.producer')"
				prop="producer">
				<Select
					v-model="formValidate.producer"
					clearable
					filterable
					style="width:200px"
					name="create-producer"
				>
					<Option
						v-for="item in manufactures"
						:value="item.id"
						:key="item.id">
						<span style="padding-right:20px">{{ item.name }}</span>
						<span style="padding-right:20px">{{ item.contact }}</span>
						<span style="padding-right:20px">{{ item.telphone }}</span>
						<span style="padding-right:20px">{{ item.address }}</span>
					</Option>
				</Select>
			</Form-item>

			<!-- 生产图 -->
			<Form-item
				:label="$t('equipment.producer_img')"
				prop="producer_img">
				<Uploader
					ref="producer_img"
					:default.sync="producer_img_src"
					@on-remove="(file)=>{handleRemove('producer_img',file)}"
					@on-change="(file)=>{handleChange('producer_img',file)}">
					{{ $t('common.pic_tip') }}
				</Uploader>
			</Form-item>

			<!-- 最小亮度 -->
			<Form-item
				:label="$t('equipment.luminance_min')"
				prop="luminance_min">
				<InputNumber
					:min="0"
					v-model="formValidate.luminance_min"
					:placeholder="$t('equipment.please_select_sku')"
					name="create-luminance_min"/>
			</Form-item>

			<!-- 最大亮度 -->
			<Form-item
				:label="$t('equipment.luminance_max')"
				prop="luminance_max">
				<InputNumber
					:min="0"

					v-model="formValidate.luminance_max"
					:placeholder="$t('equipment.please_select_sku')"
					name="create-luminance_max"/>
			</Form-item>

			<!-- 最小色温 -->
			<Form-item
				:label="$t('equipment.color_temperature_min')"
				prop="color_temperature_min">
				<InputNumber
					:min="0"

					v-model="formValidate.color_temperature_min"
					:placeholder="$t('equipment.please_select_sku')"
					name="create-color_temperature_min"/>
			</Form-item>

			<!-- 最大色温 -->
			<Form-item
				:label="$t('equipment.color_temperature_max')"
				prop="color_temperature_max">
				<InputNumber
					:min="0"

					v-model="formValidate.color_temperature_max"
					:placeholder="$t('equipment.please_select_sku')"
					name="create-color_temperature_max"/>
			</Form-item>

			<!-- 是否显示 -->
			<Form-item
				:label="$t('category.is_show')"
			>
				<RadioGroup
					v-model="formValidate.radio"

				>
					<Radio label="true">是</Radio>
					<Radio label="false">否</Radio>
				</RadioGroup>

			</Form-item>

			<Form-item>
				<Button
					type="primary"
					name="create__submit"
					@click="handleSubmit('formValidate')">
					{{ $t('common.update') }}
				</Button>
			</Form-item>

		</Form>
	</div>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin';
import { validateImage } from 'src/validate'; // 引入校验文件
import Uploader from 'src/views/component/Uploader';
import { showLocalImage } from 'src/views/mixins/showLocalImage';

export default {

	name: 'ManufacturerEdit',
	components: {
		Uploader,
	},
	mixins: [showLocalImage, labelWidthMixin],
	props: {

		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		manufacturer_solo: {
			type: Object,
			default() {
				return {};
			},
		},
		language_index: {
			type: Array,
			default() {
				return [];
			},
		},
		manufactures: {
			type: Array,
			default() {
				return [];
			},
		},
	},

	data() {
		const validateUUID = (rule, value, callback) => {
			if (!value) {
				return callback(new Error(this.$t('equipment.not_uuid')));
			}
			if (!(/^[A-Za-z0-9]{8}[-][A-Za-z0-9]{4}[-][A-Za-z0-9]{4}[-][A-Za-z0-9]{4}[-][A-Za-z0-9]{12}$/.test(value))) {
				callback(new Error(this.$t('equipment.please_enter_right_uuid')));
			} else {
				callback();
			}
		};
		return {

			is_show: 1, // 1表示显示

			producer_img_src: '',

			instruction_zh_img_src: '',

			instruction_en_img_src: '',

			use_help_zh_img_src: '',

		    use_help_en_img_src: '',

			language_id: 0,
			formValidate: {
				// code: '', // 设备型号

				device_zh_name: '', // 设备中文名名称

				device_en_name: '', // 设备英文名

				sku: 100, // 价格

				specification: '', // 蓝牙

				producer: '', // 生产商

				sort_order: 1,

				remark: '',

				radio: 'true',

				producer_img: '',

				instruction_zh_img: '',

				instruction_en_img: '',

				use_help_zh_img: '',

				use_help_en_img: '',

				luminance_min: 0,

				luminance_max: 0,

				color_temperature_min: 0,

				color_temperature_max: 0,

				service_uuid: '',

				read_uuid: '',

				write_uuid: '',

			},
			ruleValidate: { // 验证表单数据规则

				device_zh_name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.device_name') }),
						trigger: 'blur,change',
					},
				],
				device_en_name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.device_name') }),
						trigger: 'blur,change',
					},
				],

				sku: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('equipment.sku') }),
						trigger: 'blur,change',
					},
				],
				sort_order: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('equipment.sort') }),
						trigger: 'blur,change',
					},
				],
				specification: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.specification') }),
						trigger: 'blur,change',
					},
				],
				producer_img: [
					{ required: true, validator: validateImage, trigger: 'blur,change' },
				],

				instruction_zh_img: [
					{ required: true, validator: validateImage, trigger: 'blur,change' },
				],
				instruction_en_img: [
					{ required: true, validator: validateImage, trigger: 'blur,change' },
				],
				producer: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('equipment.producer') }),
						trigger: 'blur,change',
					},
				],
				use_help_zh_img: [
					{ required: true, validator: validateImage, trigger: 'blur,change' },
				],

				use_help_en_img: [
					{ required: true, validator: validateImage, trigger: 'blur,change' },
				],
				luminance_min: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('equipment.luminance_min') }),
						trigger: 'blur,change',
					},
				],
				luminance_max: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('equipment.luminance_max') }),
						trigger: 'blur,change',
					},
				],
				color_temperature_min: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('equipment.color_temperature_min') }),
						trigger: 'blur,change',
					},
				],
				color_temperature_max: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('equipment.color_temperature_max') }),
						trigger: 'blur,change',
					},
				],
				service_uuid: [
					{
						validator: validateUUID,
				        required: true,
						trigger: 'blur,change',
					},
				],
				read_uuid: [
					{
						validator: validateUUID,
				        required: true,
						trigger: 'blur,change',
					},
				],
				write_uuid: [
					{
					    validator: validateUUID,
				        required: true,
						trigger: 'blur,change',
					},
				],

			},
		};
	},
	created() {
		this.initFormData();
	},
	methods: {
      	// 切换英文tabs
		change_en_language() {
			if (event.keyCode == 9) {
				this.language_id = 1;
				 }
		},
		// 切换中文tabs
		change_zh_language() {
      	if (event.keyCode == 9) {
				this.language_id = 0;
				 }
		},


		initFormData() {
			if (this.manufacturer_solo) {

				this.formValidate.device_zh_name = this.manufacturer_solo.device_descriptions[0].name || '';

				this.formValidate.sku = this.manufacturer_solo.price;

				this.formValidate.specification = this.manufacturer_solo.bluetooth_code;

				this.formValidate.sort_order = this.manufacturer_solo.sort_order;

				this.formValidate.remark = this.manufacturer_solo.remark;

				this.formValidate.producer_img = this.manufacturer_solo.product_img;

				this.producer_img_src = this.manufacturer_solo.product_img;

				this.formValidate.instruction_zh_img = this.manufacturer_solo.device_descriptions[0].instruction_img;

				this.instruction_zh_img_src = this.manufacturer_solo.device_descriptions[0].instruction_img;

				this.formValidate.producer = this.manufacturer_solo.manufacture_id;

				this.formValidate.device_en_name = this.manufacturer_solo.device_descriptions[1].name;

				this.formValidate.instruction_en_img = this.manufacturer_solo.device_descriptions[1].instruction_img;

				this.use_help_zh_img_src = this.manufacturer_solo.device_descriptions[0].help_img;

				this.use_help_en_img_src = this.manufacturer_solo.device_descriptions[1].help_img;

				this.instruction_en_img_src = this.manufacturer_solo.device_descriptions[1].instruction_img;

				this.formValidate.use_help_zh_img = this.manufacturer_solo.device_descriptions[0].help_img;

				this.formValidate.use_help_en_img = this.manufacturer_solo.device_descriptions[1].help_img;

				this.formValidate.luminance_min = this.manufacturer_solo.luminance_min;

				this.formValidate.luminance_max = this.manufacturer_solo.luminance_max;

				this.formValidate.color_temperature_min = this.manufacturer_solo.color_temperature_min;

				this.formValidate.color_temperature_max = this.manufacturer_solo.color_temperature_max;

				this.formValidate.service_uuid = this.manufacturer_solo.service_uuid;

				this.formValidate.read_uuid = this.manufacturer_solo.read_uuid;

				this.formValidate.write_uuid = this.manufacturer_solo.write_uuid;

				if (this.manufacturer_solo.is_show == 1) {
					this.formValidate.radio = 'true';
				} else {
					this.formValidate.radio = 'false';
				}

				// console.log(this.formValidate);
			}
		},


		/**
         * 更新信息
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			if (this.loading) return;

			// this.$refs[name].validate((valid) => {
			// 	if (valid) {
			// 		this.$emit('update', this.manufacturer_solo.id, this.formDataCreate());
			// 	} else {
			// 		this.$Message.error(this.$('common.invalid_form_data'));
			// 	}
			// });

			this.$emit('update', this.manufacturer_solo.id, this.formDataCreate());
		},

		/**
         * 手动拼接表单数据
         * @return {Object} {拼接好的表单数据}
         */
		formDataCreate() {
			if (this.formValidate.radio == 'false') {
			   this.is_show = 0;
			 }
			 const new_array = [
				{
					id: 1,
					name: this.formValidate.device_zh_name,
					instruction_img: this.formValidate.instruction_zh_img,
					help_img: this.formValidate.use_help_zh_img,
				},
				{
					id: 3,
					name: this.formValidate.device_en_name,
					instruction_img: this.formValidate.instruction_en_img,
					help_img: this.formValidate.use_help_en_img,
				},

			 ];


			const new_object = {
				_method: 'PUT',

				name: this.formValidate.device_zh_name,

				price: this.formValidate.sku,

				bluetooth_code: this.formValidate.specification,

				manufacture_id: this.formValidate.producer,

				sort_order: this.formValidate.sort_order,

				is_show: this.is_show,

				product_img: this.formValidate.producer_img,

				luminance_min: this.formValidate.luminance_min,

				luminance_max: this.formValidate.luminance_max,

				color_temperature_min: this.formValidate.color_temperature_min,

				color_temperature_max: this.formValidate.color_temperature_max,

				service_uuid: this.formValidate.service_uuid,

				read_uuid: this.formValidate.read_uuid,

				write_uuid: this.formValidate.write_uuid,
			};

			if (this.formValidate.remark) {
				  new_object.remark = this.formValidate.remark;
			}

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				form_data.append(key, new_object[key]);
			});

			// dexcriptions需为数组
			for (let i = 0; i < new_array.length; i++) {
				for (const key in new_array[i]) {
					form_data.append(`descriptions[${new_array[i].id}][${key}]`, new_array[i][key]);
				}
			}

			return form_data;
		},

		// 選擇圖片
		handleChange(field, { file }) {
			this.formValidate[field] = file;
			// this.$refs.formValidate.validateField(field);
		},
		/**
		 * 删除图片
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleRemove(field) {
			this.formValidate[field] = null;
			// this.$refs.formValidate.validateField(field);
		},

	},
};
</script>
